<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Ai chat</title>
    <!-- 引入jQuery库 -->
    <!--    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>-->
    <!--<script type="text/javascript">
        $(document).ready(function () {
            $('#submitButton').click(function () {
                $.ajax({
                    url: '/ai/generate', // 后台接口的URL
                    type: 'POST',
                    data: $('#dataForm').serialize(),
                    contentType: "application/x-www-form-urlencoded; charset=utf-8",
                    success: function (response) {
                        // 成功时更新页面上的响应区域
                        $('#responseArea').text('Server Response: ' + response);
                    },
                    error: function (xhr, status, error) {
                        console.error(error); // 错误处理
                    }
                });
            });
        });
    </script>-->
</head>
<body>
<h1>CDS AI CHAT</h1>

<!-- 表单 -->
<form id="dataForm" th:action="@{/ai/generate}" method="post">
    <label for="prompt">Enter the question:</label>
    <input type="text" id="prompt" name="prompt" required/>
    <button type="submit" id="submitButton">Submit</button>
</form>

<!-- 用于显示服务器响应的部分 -->
<div th:if="${result != null}">
    <h2>Ai Response:</h2>
    <p th:text="'Ollama answer: ' + ${result}"></p>
</div>

</body>
</html>
